<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>刘超的博客</title><meta name="author" content="刘超"><meta name="copyright" content="刘超"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="只有自己强大，才不会被别人践踏。">
<meta property="og:type" content="website">
<meta property="og:title" content="刘超的博客">
<meta property="og:url" content="https://leachliu.gitee.io/page/4/index.html">
<meta property="og:site_name" content="刘超的博客">
<meta property="og:description" content="只有自己强大，才不会被别人践踏。">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://leachliu.gitee.io/images/avatar.webp">
<meta property="article:author" content="刘超">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://leachliu.gitee.io/images/avatar.webp"><link rel="shortcut icon" href="/images/favicon.ico"><link rel="canonical" href="https://leachliu.gitee.io/page/4/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
  root: '/',
  algolia: {"appId":"VFZO06XK8A","apiKey":"1202cec78a85d208874b3c9cbcd0e212","indexName":"index total","hits":{"per_page":10},"languages":{"input_placeholder":"搜索文章","hits_empty":"找不到您查询的内容：${query}","hits_stats":"找到 ${hits} 条结果，用时 ${time} 毫秒"}},
  localSearch: undefined,
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  dateSuffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  infinitegrid: {
    js: 'https://cdn.jsdelivr.net/npm/@egjs/infinitegrid/dist/infinitegrid.min.js',
    buttonText: '加载更多'
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  },
  autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '刘超的博客',
  isPost: false,
  isHome: true,
  isHighlightShrink: false,
  isToc: false,
  postUpdate: '2023-11-06 16:30:51'
}</script><script>(win=>{
      win.saveToLocal = {
        set: (key, value, ttl) => {
          if (ttl === 0) return
          const now = Date.now()
          const expiry = now + ttl * 86400000
          const item = {
            value,
            expiry
          }
          localStorage.setItem(key, JSON.stringify(item))
        },
      
        get: key => {
          const itemStr = localStorage.getItem(key)
      
          if (!itemStr) {
            return undefined
          }
          const item = JSON.parse(itemStr)
          const now = Date.now()
      
          if (now > item.expiry) {
            localStorage.removeItem(key)
            return undefined
          }
          return item.value
        }
      }
    
      win.getScript = (url, attr = {}) => new Promise((resolve, reject) => {
        const script = document.createElement('script')
        script.src = url
        script.async = true
        script.onerror = reject
        script.onload = script.onreadystatechange = function() {
          const loadState = this.readyState
          if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
          script.onload = script.onreadystatechange = null
          resolve()
        }

        Object.keys(attr).forEach(key => {
          script.setAttribute(key, attr[key])
        })

        document.head.appendChild(script)
      })
    
      win.getCSS = (url, id = false) => new Promise((resolve, reject) => {
        const link = document.createElement('link')
        link.rel = 'stylesheet'
        link.href = url
        if (id) link.id = id
        link.onerror = reject
        link.onload = link.onreadystatechange = function() {
          const loadState = this.readyState
          if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
          link.onload = link.onreadystatechange = null
          resolve()
        }
        document.head.appendChild(link)
      })
    
      win.activateDarkMode = () => {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = () => {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
        if (t === 'dark') activateDarkMode()
        else if (t === 'light') activateLightMode()
      
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
      const detectApple = () => {
        if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
          document.documentElement.classList.add('apple')
        }
      }
      detectApple()
    })(window)</script><link rel="stylesheet" href="https://npm.elemecdn.com/ethan4116-blog/lib/css/plane_v2.css"><link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css"  media="defer" onload="this.media='all'"><script defer src="/js/custom.js"></script><link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css"><link rel="stylesheet" href="/css/universe.css"><link rel="stylesheet" href="/css/custom.css"><!-- hexo injector head_end start --><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css" media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/tag_plugins.css" media="defer" onload="this.media='all'"><script src="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js"></script><!-- hexo injector head_end end --><meta name="generator" content="Hexo 7.0.0"></head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/images/avatar.webp" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">41</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">21</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">6</div></a></div><hr class="custom-hr"/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-top-img" id="page-header"><nav id="nav"><span id="blog-info"><a href="/" title="刘超的博客"><span class="site-name">刘超的博客</span></a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2021/09/17/webpack/webpack%E6%89%93%E5%8C%85HTML/" title="webpack打包html资源">webpack打包html资源</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-09-16T16:00:00.000Z" title="发表于 2021-09-17 00:00:00">2021-09-17</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/webpack/">webpack</a></span></div><div class="content">webpack 打包 html&emsp;打包构建的时候会有一个 build 文件夹,里面存放着打包压缩之后的文件

loader: 1. 下载 2. 使用(配置 loader)
plugins: 1.下载 2. 引入 3.使用

const &#123; resolve &#125; = require(&quot;path&quot;)const HtmlWebpackPlugin = require(&quot;html-webpack-plugin&quot;);module.exports = &#123;  entry:&#x27;./src/index.js&#x27;,  output:&#123;    filename:&quot;built.js&quot;,    path:resolve(__dirname,&quot;build&quot;)  &#125;  module:&#123;    rules:[]  &#125;,  plugins:[    //plugins的配置    //html-webpack-plugin    //功能: 默认会创 ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2021/09/16/webpack/webpack%E5%88%9D%E4%BD%93%E9%AA%8C/" title="webpack的基本文件配置">webpack的基本文件配置</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-09-15T16:00:00.000Z" title="发表于 2021-09-16 00:00:00">2021-09-16</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/webpack/">webpack</a></span></div><div class="content">webpack 初体验&emsp;很长一段时间没有写博客了,今天想复习一下基本的知识,也是我们在项目中常用到的一个构建工具 webpack,所有构建工具都是基于 nodejs 平台运行的~模块化默认采用的是 commonjs, 我们的 src 文件夹中的文件一般是采用 ES6 模块化的语法规范,webpack.config.js 采用的是 commonjs 规范,下面从最基本的 wepack 配置开始学习
&emsp;webpack 有五个核心配置

entry 入口文件
output 出口文件
modules 解析器
plugins 插件
mode 模式

module.exports = &#123;  entry:&quot;&quot;,  output:&#123;&#125;,  modules:&#123;&#125;,  plugin:[],  mode:&quot;&quot;&#125;

&emsp;上面是最基本的五个 webpack 的配置,在项目中我们需要打包文件,此时就要有输入文件,和打包之后的输出文件,
// resolve 用来拼接绝对路径const & ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2021/09/16/webpack/webpack%E6%89%93%E5%8C%85%E5%9B%BE%E7%89%87%E8%B5%84%E6%BA%90/" title="webpack打包图片资源">webpack打包图片资源</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-09-15T16:00:00.000Z" title="发表于 2021-09-16 00:00:00">2021-09-16</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/webpack/">webpack</a></span></div><div class="content">webpack 打包图片资源&emsp;使用 webpack 构建图片到
const  &#123; resolve &#125;  =  require(&#x27;path&#x27;);module.exports = &#123;  entry:&#x27;./src/index.js&#x27;,  output:&#123;    filename:&#x27;built.js&#x27;,    paht:resolve(__dirname,&#x27;build&#x27;)  &#125;,  module:&#123;    rules:[      &#123;        test:/\.less$/,        //要使用多个loader 使用use处理        use:[&#x27;style-loader&#x27;,&#x27;css-loader&#x27;,&#x27;less-loader&#x27;]      &#125;,      &#123;        //处理图片资源        //默认处理不了HTML里面的图片   ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2021/07/23/js/%E6%95%B0%E7%BB%84%E7%9A%84reduce%E6%96%B9%E6%B3%95/" title="数组的reduce方法">数组的reduce方法</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-07-22T16:00:00.000Z" title="发表于 2021-07-23 00:00:00">2021-07-23</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/javaScript/">javaScript</a></span></div><div class="content">js数组的reduce方法&emsp;&emsp;数组的reduce方法也是我们在面试过程中常遇到的一个方法,但是在写代码的时候却不是很多人会用到,这是为什么呢?因为reduce方法里面的参数会很多,对每个参数的意义以及使用没有很了解
arr.reduce((prev,cur,index,arr)=&gt;&#123;&#125;,init)// 或者arr.reduce((prev,cur,index,arr)=&gt;&#123;&#125;,);

prev 表示上一次调用时回调的返回值,或者初始值 init;

cur  表示当前正在处理的元素

index 表示当前正在处理元素的索引值,若提供 init 值, 则索引为0 ,否则索引为1

arr 表示原数组;


常用的参数只有2个: prev 和 cur

数组求和 求乘积const array1 = [1,2,3,4,5,6]const numb1 = array1.reduce((prev,cur)=&gt; prev += cur,0)console.log(numb1)const numb2 = array1.re ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2021/07/22/Html/html/" title="散记">散记</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-07-21T16:00:00.000Z" title="发表于 2021-07-22 00:00:00">2021-07-22</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/html/">html</a></span></div><div class="content">样式继承&emsp;在一些平时的写HTML样式的过程中,你可能会遇到给祖先元素或者父类元素加样式的时候,子类元素同样也会加上样式,而且有时权重不够的时候
/** * 样式的继承, 我们为一个元素设置样式同事也会应用到它的后代元素上 *  * 继承是发生在祖先和后代之间 *  * 继承的设计是为了我们方便的开发, * 利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上, *  *  * 注意,并不是所有的样式都会继承 *  *     比如 背景相关的,布局相关的这些样式都不会被继承
p&#123;    color:red;    background-color:orange&#125;div&#123;    color:yellow&#125;&lt;p&gt;   我是一个元素   &lt;span&gt;我是P元素的span&lt;/span&gt;    &lt;p&gt;

RGB、RGBA和 HSL 还有HSLA的值&emsp;RGB,R代表了Red红色,G代表了Green绿色,B代表了Blue蓝色,这三个颜色的区间范围都是0~100%,三个颜色中和然后显示自己 ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2021/07/22/js/%E6%95%B0%E7%BB%84%E6%89%81%E5%B9%B3%E5%8C%96%E5%A4%84%E7%90%86/" title="数组扁平化处理">数组扁平化处理</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-07-21T16:00:00.000Z" title="发表于 2021-07-22 00:00:00">2021-07-22</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/javaScript/">javaScript</a></span></div><div class="content">数组扁平化处理&emsp;&emsp;在面试过程当中常常会遇到一些题目让你去操作数组的方法来解答题目,这篇文章主要讲的是对一个数组进行扁平化的处理,我的理解就是去除多余的、厚重的结构,可以实现多维数组转成一维数组，在下面展示我自己对于数组扁平化的几种处理方式.

ES6 flat 方法
const arr = [1,2,3,[4,5,[6,7],8],9];arr.flat(Infinity);
&emsp;&emsp;Infinity可以展开,flat()方法会移除数组中的空项,flat(number),number为指定的结构的几维数组,性能方面来说Infinity性能是最好的;

数组递归
//设计一个新的空数组 后续数据push到其中let res = [];const arr1 = [1,2,3,[4,5,[6,7],8],9];const flatArray = (arr) =&gt; &#123;   //循环数组 判断数组中的当前是否为数组   if(Array.isArray(arr1[i]))&#123;       //如果是素组则进行递归 再次调用方法循环数组  ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2021/06/30/js/%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6%E6%9C%BA%E5%88%B6/" title="垃圾回收机制">垃圾回收机制</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-06-29T16:00:00.000Z" title="发表于 2021-06-30 00:00:00">2021-06-30</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/javaScript/">javaScript</a></span></div><div class="content">垃圾回收机制&emsp;通常情况下,垃圾回收机制分为手动回收和自动回收&emsp;手动回收策略,何时分配内存、何时销毁内容都是由代码控制的。&emsp;自动回收策略,产生的垃圾数据是垃圾回收器来释放的,并不需要手动通过代码来释放。
JavaScript中调用栈中的数据回收&emsp;JavaScript引擎会通过向下移动ESP(记录当前执行状态的指针)来销毁该函数保存在栈中的执行上下文。
JavaScript堆中的数据回收在V8中会把堆分为新生代和老生代两个区域,新生代中存放的是生存时间短的对象,老生代中存放的生存时间久的对象。
新生代通常只支持1-8m的容量,而老生代支持的区量就大很多了。对于这两个区域
</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2021/06/29/js/js%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6/" title="手写方法">手写方法</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-06-28T16:00:00.000Z" title="发表于 2021-06-29 00:00:00">2021-06-29</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/javaScript/">javaScript</a></span></div><div class="content"></div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2021/06/29/js/%E6%89%8B%E5%86%99%E7%AE%80%E6%98%93%E5%8C%96%E5%90%84%E7%A7%8D%E6%95%B0%E7%BB%84%E6%96%B9%E6%B3%95/" title="手写简化版方法">手写简化版方法</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-06-28T16:00:00.000Z" title="发表于 2021-06-29 00:00:00">2021-06-29</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/javaScript/">javaScript</a></span></div><div class="content">&emsp;因为在面试中会经常遇到各种手写一个简化版的数组方法,比如map,filter的实现方法,下面是我自己写的一个简化版的map和filter的实现方法,后续会补充其他数组的方法
手写简易map方法let arr = [1,2,3]function map(arr,mapCallback)&#123;    //判断是否是数组 如果不是数组则返回一个空数组    if(!Array.isArray(arr) || !arr.length || typeof mapCallback !== &#x27;function&#x27;)&#123;        return []    &#125;else&#123;        let result = []        for(let i = 0 ;i &lt; arr.length ;i++)&#123;            //循环遍历数组  然后执行回调函数 push到数组            result.push(mapCallback(arr[i],i,arr))        &#125;        r ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2021/05/27/js/%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0/" title="箭头函数">箭头函数</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-05-26T16:00:00.000Z" title="发表于 2021-05-27 00:00:00">2021-05-27</time></span><span class="article-meta"><span class="article-meta-separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/javaScript/">javaScript</a></span></div><div class="content">
普通函数中的 this
this 总是代表它的直接调用者(js 的 this 是执行上下文),例如 obj.func,那么 func 中的 this 就是 obj
在默认情况下(非严格模式下,未使用’use strict’),没找到直接调用者,则 this 指的是 window(约定俗成)
在构造函数中 this 指向是的这个构造函数本身
call、apply 应用改变 this 指向()中的参数是新的 this 指向
Dom 上的回调函数 this 指向 Dom



箭头函数中的 this
箭头函数中的 this 是在定义函数的时候绑定的,而不是在执行函数的时候绑定的.

箭头函数中,this 的指向固定化,并不是因为箭头函数内部有绑定 this 的机制,实际原因是箭头函数根本没有自己的 this,导致内部的 this 就是外层代码的 this,正是因为它没有 this,所以也不能用作构造函数

箭头函数中的 this 是在定义函数的时候绑定的
var x = 11;var obj  = &#123;  x:22,  say:()=&gt;&#123;    console.lo ...</div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/page/3/#content-inner"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/3/#content-inner">3</a><span class="page-number current">4</span><a class="page-number" href="/page/5/#content-inner">5</a><a class="extend next" rel="next" href="/page/5/#content-inner"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/images/avatar.webp" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">刘超</div><div class="author-info__description">只有自己强大，才不会被别人践踏。</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">41</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">21</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">6</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/xxxxxx"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="http://wpa.qq.com/msgrd?v=3&amp;uin=923946406&amp;site=qq&amp;menu=yes" target="_blank" title="QQ"><i class="fab fa-qq"></i></a><a class="social-icon" href="https://chao-picture-bed.oss-cn-hangzhou.aliyuncs.com/blog/vue/popperJs/202301131417748.jpg" target="_blank" title="Wechat"><i class="fab fa-weixin"></i></a><a class="social-icon" href="/923946406@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a><a class="social-icon" href="https://github.com/tzy13755126023" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="/atom.xml" target="_blank" title="Rss"><i class="fas fa-rss"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">书山有路勤为径,学海无涯苦作舟</div></div><div class="card-widget tzy-right-widget" id="card-wechat"><div id="flip-wrapper"><div id="flip-content"><div class="face"></div><div class="back face"></div></div></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/11/06/comlibary/4.%E7%BB%84%E4%BB%B6%E5%BA%93%E7%B1%BB%E5%90%8D%E6%96%B9%E6%B3%95%E5%AE%9E%E7%8E%B0%E4%BB%A5%E5%8F%8A%E8%A7%84/" title="无题">无题</a><time datetime="2023-11-06T07:16:00.298Z" title="发表于 2023-11-06 15:16:00">2023-11-06</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/11/06/comlibary/3.%E6%90%AD%E5%BB%BA%E7%BB%84%E4%BB%B6%E5%BA%93%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83/" title="组件库框架 - 3 搭建组件库开发环境"><img src="/images/beijing4.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="组件库框架 - 3 搭建组件库开发环境"/></a><div class="content"><a class="title" href="/2023/11/06/comlibary/3.%E6%90%AD%E5%BB%BA%E7%BB%84%E4%BB%B6%E5%BA%93%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83/" title="组件库框架 - 3 搭建组件库开发环境">组件库框架 - 3 搭建组件库开发环境</a><time datetime="2023-11-06T06:30:00.000Z" title="发表于 2023-11-06 14:30:00">2023-11-06</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/11/06/comlibary/2.%E5%88%9D%E5%A7%8B%E5%8C%96workspace-root/" title="组件库框架 - 2 初始化workspace-root"><img src="/images/beijing4.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="组件库框架 - 2 初始化workspace-root"/></a><div class="content"><a class="title" href="/2023/11/06/comlibary/2.%E5%88%9D%E5%A7%8B%E5%8C%96workspace-root/" title="组件库框架 - 2 初始化workspace-root">组件库框架 - 2 初始化workspace-root</a><time datetime="2023-11-06T03:18:00.000Z" title="发表于 2023-11-06 11:18:00">2023-11-06</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/10/27/comlibary/1.%E6%90%AD%E5%BB%BApnpm%E3%80%81monorepo/" title="组件库框架 - 1 搭建pnpn monorepo"><img src="/images/beijing3.webp" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="组件库框架 - 1 搭建pnpn monorepo"/></a><div class="content"><a class="title" href="/2023/10/27/comlibary/1.%E6%90%AD%E5%BB%BApnpm%E3%80%81monorepo/" title="组件库框架 - 1 搭建pnpn monorepo">组件库框架 - 1 搭建pnpn monorepo</a><time datetime="2023-10-27T06:36:00.000Z" title="发表于 2023-10-27 14:36:00">2023-10-27</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/01/12/other/%E4%BD%BF%E7%94%A8OSS+PicGo%E6%90%AD%E5%BB%BA%E5%9B%BE%E5%BA%8A/" title="使用OSS+PicGo搭建图床"><img src="https://chao-picture-bed.oss-cn-hangzhou.aliyuncs.com/blog/vue/popperJs/202301121557184.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="使用OSS+PicGo搭建图床"/></a><div class="content"><a class="title" href="/2023/01/12/other/%E4%BD%BF%E7%94%A8OSS+PicGo%E6%90%AD%E5%BB%BA%E5%9B%BE%E5%BA%8A/" title="使用OSS+PicGo搭建图床">使用OSS+PicGo搭建图床</a><time datetime="2023-01-12T07:39:00.000Z" title="发表于 2023-01-12 15:39:00">2023-01-12</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
            <i class="fas fa-folder-open"></i>
            <span>分类</span>
            
            </div>
            <ul class="card-category-list" id="aside-cat-list">
            <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/git/"><span class="card-category-list-name">git</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/html/"><span class="card-category-list-name">html</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/javaScript/"><span class="card-category-list-name">javaScript</span><span class="card-category-list-count">10</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/react/"><span class="card-category-list-name">react</span><span class="card-category-list-count">17</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/webpack/"><span class="card-category-list-name">webpack</span><span class="card-category-list-count">4</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E7%BB%84%E4%BB%B6%E5%BA%93/"><span class="card-category-list-name">组件库</span><span class="card-category-list-count">3</span></a></li>
            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/state/" style="font-size: 1.1em; color: #999">state</a> <a href="/tags/tinymce/" style="font-size: 1.23em; color: #999ea6">tinymce</a> <a href="/tags/git/" style="font-size: 1.1em; color: #999">git</a> <a href="/tags/%E5%B8%83%E5%B1%80/" style="font-size: 1.5em; color: #99a9bf">布局</a> <a href="/tags/html/" style="font-size: 1.1em; color: #999">html</a> <a href="/tags/router/" style="font-size: 1.1em; color: #999">router</a> <a href="/tags/cross-env/" style="font-size: 1.1em; color: #999">cross-env</a> <a href="/tags/webpack/" style="font-size: 1.5em; color: #99a9bf">webpack</a> <a href="/tags/redux/" style="font-size: 1.23em; color: #999ea6">redux</a> <a href="/tags/S3/" style="font-size: 1.23em; color: #999ea6">S3</a> <a href="/tags/Array/" style="font-size: 1.37em; color: #99a4b2">Array</a> <a href="/tags/js/" style="font-size: 1.23em; color: #999ea6">js</a> <a href="/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" style="font-size: 1.1em; color: #999">设计模式</a> <a href="/tags/axios/" style="font-size: 1.1em; color: #999">axios</a> <a href="/tags/chrome/" style="font-size: 1.1em; color: #999">chrome</a> <a href="/tags/ssr/" style="font-size: 1.1em; color: #999">ssr</a> <a href="/tags/this/" style="font-size: 1.1em; color: #999">this</a> <a href="/tags/Ref/" style="font-size: 1.1em; color: #999">Ref</a> <a href="/tags/%E7%BB%84%E4%BB%B6%E5%BA%93/" style="font-size: 1.37em; color: #99a4b2">组件库</a> <a href="/tags/react/" style="font-size: 1.23em; color: #999ea6">react</a> <a href="/tags/%E7%BC%96%E8%AF%91/" style="font-size: 1.1em; color: #999">编译</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/11/"><span class="card-archive-list-date">十一月 2023</span><span class="card-archive-list-count">3</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/10/"><span class="card-archive-list-date">十月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/01/"><span class="card-archive-list-date">一月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/12/"><span class="card-archive-list-date">十二月 2022</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/08/"><span class="card-archive-list-date">八月 2022</span><span class="card-archive-list-count">7</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/01/"><span class="card-archive-list-date">一月 2022</span><span class="card-archive-list-count">8</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/12/"><span class="card-archive-list-date">十二月 2021</span><span class="card-archive-list-count">6</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/09/"><span class="card-archive-list-date">九月 2021</span><span class="card-archive-list-count">5</span></a></li></ul></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2023  <i id="heartbeat" class="fa fas fa-heartbeat"></i> 刘超</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.min.js"></script><div class="js-pjax"></div><canvas id="universe"></canvas><script defer src="/js/universe.js"></script><script defer src="https://fastly.jsdelivr.net/npm/hexo-theme-volantis@latest/source/js/issues.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="algolia-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="search-wrap"><div id="algolia-search-input"></div><hr/><div id="algolia-search-results"><div id="algolia-hits"></div><div id="algolia-pagination"></div><div id="algolia-info"><div class="algolia-stats"></div><div class="algolia-poweredBy"></div></div></div></div></div><div id="search-mask"></div><script src="https://cdn.jsdelivr.net/npm/algoliasearch/dist/algoliasearch-lite.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/instantsearch.js/dist/instantsearch.production.min.js"></script><script src="/js/search/algolia.js"></script></div></div><!-- hexo injector body_end start --><script async src="//at.alicdn.com/t/font_2032782_8d5kxvn09md.js"></script><!-- hexo injector body_end end --></body></html>